<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页刮刮乐</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            margin: 0;
            background: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
            font-family: 'Arial', sans-serif;
        }
        
        .container {
            text-align: center;
            padding: 20px;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
            margin-bottom: 30px;
        }
        
        h1 {
            color: #d35400;
            margin-bottom: 20px;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
        }
        
        .scratch-card {
            position: relative;
            margin: 0 auto;
            width: 400px;
            height: 300px;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
        }
        
        .prize-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 12px;
        }
        
        #canvas {
            position: absolute;
            top: 0;
            left: 0;
            border-radius: 12px;
            cursor: pointer;
        }
        
        .controls {
            margin-top: 20px;
            display: flex;
            gap: 15px;
        }
        
        button {
            padding: 12px 25px;
            background: #e67e22;
            color: white;
            border: none;
            border-radius: 30px;
            cursor: pointer;
            font-size: 16px;
            font-weight: bold;
            transition: all 0.3s ease;
            box-shadow: 0 4px 10px rgba(230, 126, 34, 0.3);
        }
        
        button:hover {
            background: #d35400;
            transform: translateY(-2px);
            box-shadow: 0 6px 15px rgba(230, 126, 34, 0.4);
        }
        
        .scratch-percentage {
            margin-top: 15px;
            font-size: 18px;
            color: #7f8c8d;
            font-weight: bold;
        }
        
        .prize-text {
            margin-top: 15px;
            font-size: 22px;
            color: #e74c3c;
            font-weight: bold;
            min-height: 30px;
        }
        
        .instructions {
            margin-top: 25px;
            color: #7f8c8d;
            font-size: 16px;
            text-align: center;
            max-width: 500px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>网页刮刮乐</h1>
        
        <div class="scratch-card">
            <img class="prize-image" src="https://images.unsplash.com/photo-1607083206968-13611e3d76db?auto=format&fit=crop&w=400&h=300&q=80" alt="奖品图片">
            <canvas id="canvas" width="400" height="300"></canvas>
        </div>
        
        <div class="prize-text" id="prizeText"></div>
        <div class="scratch-percentage" id="percentage">已刮开: 0%</div>
        
        <div class="controls">
            <button id="resetBtn">再来一次</button>
            <button id="revealBtn">直接揭晓</button>
        </div>
        

    </div>

    <script>
        const canvas = document.getElementById('canvas');
        const context = canvas.getContext('2d');
        const resetBtn = document.getElementById('resetBtn');
        const revealBtn = document.getElementById('revealBtn');
        const percentageEl = document.getElementById('percentage');
        const prizeTextEl = document.getElementById('prizeText');
        
        // 奖品列表
        const prizes = [
            "恭喜获得一等奖：iPhone 15 Pro!",
            "恭喜获得二等奖：AirPods Pro!",
            "恭喜获得三等奖：100元优惠券!",
            "恭喜获得四等奖：50元优惠券!",
            "恭喜获得五等奖：10元优惠券!",
            "谢谢参与，下次好运!"
        ];
        
        let currentPrize = "";
        
        // 初始化涂层
        function initScratchLayer() {
            // 生成金色渐变涂层
            const gradient = context.createLinearGradient(0, 0, 400, 300);
            gradient.addColorStop(0, '#ffd700');
            gradient.addColorStop(0.5, '#daa520');
            gradient.addColorStop(1, '#b8860b');
            
            context.fillStyle = gradient;
            context.fillRect(0, 0, 400, 300);
            
            // 添加金币图案
            context.font = "bold 36px Arial";
            context.fillStyle = "rgba(0, 0, 0, 0.3)";
            context.textAlign = "center";
            context.fillText("💰", 200, 150);
            
            context.font = "bold 24px Arial";
            context.fillText("刮我有奖", 200, 190);
            
            // 重置百分比
            scratchedPixels = 0;
            totalPixels = 400 * 300;
            updatePercentage();
            
            // 随机选择一个奖品
            currentPrize = prizes[Math.floor(Math.random() * prizes.length)];
            prizeTextEl.textContent = "";
        }
        
        // 初始化变量
        let isScratching = false;
        let scratchedPixels = 0;
        let totalPixels = 400 * 300;
        let prizeRevealed = false;
        
        // 计算刮开百分比
        function updatePercentage() {
            const percentage = Math.round((scratchedPixels / totalPixels) * 100);
            percentageEl.textContent = `已刮开: ${percentage}%`;
            
            // 如果刮开超过60%，显示奖品
            if (percentage > 60 && !prizeRevealed) {
                prizeTextEl.textContent = currentPrize;
                prizeRevealed = true;
                
                // 添加一些庆祝效果
                if (!currentPrize.includes("谢谢参与")) {
                    confettiEffect();
                }
            }
        }
        
        // 全部揭开
        function revealAll() {
            context.clearRect(0, 0, 400, 300);
            scratchedPixels = totalPixels;
            updatePercentage();
        }
        
        // 简易庆祝效果
        function confettiEffect() {
            const confettiCount = 100;
            const container = document.querySelector('.container');
            
            for (let i = 0; i < confettiCount; i++) {
                const confetti = document.createElement('div');
                confetti.innerHTML = '🎉';
                confetti.style.position = 'absolute';
                confetti.style.fontSize = Math.random() * 20 + 10 + 'px';
                confetti.style.left = Math.random() * 400 + 'px';
                confetti.style.top = '-50px';
                confetti.style.opacity = Math.random();
                confetti.style.zIndex = '1000';
                container.appendChild(confetti);
                
                // 动画
                const animation = confetti.animate([
                    { transform: 'translateY(0) rotate(0deg)', opacity: 1 },
                    { transform: `translateY(${window.innerHeight}px) rotate(${Math.random() * 360}deg)`, opacity: 0 }
                ], {
                    duration: Math.random() * 3000 + 2000,
                    easing: 'cubic-bezier(0.1, 0.8, 0.3, 1)'
                });
                
                animation.onfinish = () => {
                    confetti.remove();
                };
            }
        }
        
        // 鼠标事件处理
        canvas.addEventListener('mousedown', () => {
            isScratching = true;
        });
        
        canvas.addEventListener('mouseup', () => {
            isScratching = false;
        });
        
        canvas.addEventListener('mousemove', (e) => {
            if (isScratching) {
                const rect = canvas.getBoundingClientRect();
                const x = e.clientX - rect.left;
                const y = e.clientY - rect.top;
                
                context.globalCompositeOperation = "destination-out";
                context.beginPath();
                context.arc(x, y, 18, 0, Math.PI * 2);
                context.fill();
                
                // 更新刮开的像素计数（简化估算）
                scratchedPixels += 120;
                updatePercentage();
            }
        });
        
        // 触摸事件支持
        canvas.addEventListener('touchstart', (e) => {
            e.preventDefault();
            isScratching = true;
        });
        
        canvas.addEventListener('touchend', () => {
            isScratching = false;
        });
        
        canvas.addEventListener('touchmove', (e) => {
            if (isScratching) {
                const rect = canvas.getBoundingClientRect();
                const touch = e.touches[0];
                const x = touch.clientX - rect.left;
                const y = touch.clientY - rect.top;
                
                context.globalCompositeOperation = "destination-out";
                context.beginPath();
                context.arc(x, y, 18, 0, Math.PI * 2);
                context.fill();
                
                // 更新刮开的像素计数（简化估算）
                scratchedPixels += 120;
                updatePercentage();
            }
        });
        
        // 按钮事件
        resetBtn.addEventListener('click', () => {
            prizeRevealed = false;
            initScratchLayer();
        });
        
        revealBtn.addEventListener('click', revealAll);
        
        // 初始化
        initScratchLayer();
    </script>
</body>
</html>